<template>
  <el-dialog :title="title" :visible.sync="dialogVisible" :before-close="handleClose">
    <el-form :model="formInline" class="form" label-position="right" label-width="140px" size="small" :rules="rules" ref="formInline">
      <div style="display:flex">
        <div class="box_left">
          <el-form-item label="姓 名" prop="realName">
            <el-input v-model="formInline.realName" :disabled='disabled'></el-input>
          </el-form-item>
          <el-form-item label="身份证号" prop="identityCard">
            <el-input v-model="formInline.identityCard" :disabled='disabled'></el-input>
          </el-form-item>
          <el-form-item label="证件编码" prop="certNo">
            <el-input v-model="formInline.certNo" :disabled='disabled'></el-input>
          </el-form-item>
          <el-form-item label="持证项目" prop="certProject">
            <el-select v-model="formInline.certProject" placeholder="请选择" :disabled='disabled'>
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
            <!-- <el-input v-model="formInline.certProject" :disabled='disabled'></el-input> -->
          </el-form-item>
          <el-form-item label="作业证书有效期" prop="certExpDate">
            <el-date-picker v-model="formInline.certExpDate" type="date" placeholder="选择日期" size='small' value-format="yyyy-MM-dd" :disabled='disabled'>
            </el-date-picker>
          </el-form-item>
          <el-form-item label="联系电话(手机)" prop="phonenumber">
            <el-input v-model="formInline.phonenumber" :disabled='disabled'></el-input>
          </el-form-item>

        </div>
        <div class="box_right">
          <el-form-item label="上传照片">
            <el-upload accept=".jpg,.jpeg,.png,.gif,.bmp" action="#" :limit="1" list-type="picture-card" :auto-upload="false" :on-exceed="handleExceedone"
              :on-change="uploadFlie" :file-list="fileList" :class="fileList.length > 0 ? 'delUploadColor' : ''">
              <i slot="default" class="el-icon-plus"></i>
              <div slot="file" slot-scope="{ file }">
                <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                <span class="el-upload-list__item-actions">
                  <!-- <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                    <i class="el-icon-zoom-in"></i>
                  </span> -->
                  <span class="el-upload-list__item-delete" @click="removeFile(file)" v-if="!disabled">
                    <i class="el-icon-delete" ></i>
                  </span>
                </span>
              </div>
            </el-upload>
          </el-form-item>
          <el-form-item label="证件上传" class="uploadMain" prop="certFileName" ref="uploadMain">
            <el-input class="uploadInput" v-model="certFileName" autocomplete="off" size='small' readonly>
              <i slot="suffix" class="el-input__icon el-icon-circle-close" @click="handleClick()" v-if="!disabled"></i>
            </el-input>
          </el-form-item>
          <el-upload accept=".pdf" class="upload-demo" action="#" :auto-upload="false" :limit="1" :show-file-list="false" :on-change="beforeUpload"
            :file-list="fileList1" v-if="fileList1.length==0" style="margin-left:40%">
            <el-button size="small" type="primary" :loading='loading'>点击上传</el-button>
          </el-upload>
        </div>
      </div>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button type="success" @click="getEdit('formInline')" size='small' v-if="title=='人员修改'">修改保存</el-button>
      <el-button type="success" @click="getAdd('formInline')" size='small' v-if="title=='人员添加'">新增保存</el-button>
      <el-button size='small' @click="handleClose" v-if="title!='人员详情'">取消</el-button>
    </span>
  </el-dialog>
</template>

<script>
import {
  validatePhoneTwo,
  isvalidateIdNo
} from "@/utils/validate"
import { getUploadFile } from '@/api/public'
import { addmaintUserInfo, editmaintUserList } from '@/api/people'
export default {
  data () {
    const validateFile = (rule, value, callback) => {
      if (!this.certFileName) {  //当'this.resourceForm.imageUrl'不等于‘true’
        callback(new Error("请上传文件"))
      } else {
        callback()
      }
    }
    // 联系电话验证
    const validPhoneNo = (rule, value, callback) => {
      if (value) {
        if (!validatePhoneTwo(value)) {
          callback(new Error('请输入正确的联系电话'))
        } else {
          callback()
        }
      } else {
        callback()
      }
    }
    return {
      certFileName: null,
      loading: false,
      fileList1: [],
      rules: {
        realName: [
          { required: true, message: '请输入姓名', trigger: 'blur' }
        ],
        identityCard: [
          { required: true, message: '请输入身份号', trigger: 'blur' },
          { required: true, validator: isvalidateIdNo, trigger: "blur" },
        ],
        certNo: [
          { required: true, message: '请输入证件编码', trigger: 'blur' }
        ],
        certProject: [
          { required: true, message: '请选择持证项目', trigger: 'change' }
        ],
        certExpDate: [
          { required: true, message: '请选择作业证书有效期', trigger: 'change' }
        ],
        phonenumber: [
          { required: true, message: '请输入联系电话', trigger: 'blur' },
          { required: true, validator: validPhoneNo, trigger: "blur" },
        ],
        certFileName: [
          { required: true, validator: validateFile, trigger: 'change' },
        ]
      },
      options: [
        {
          value: '1',
          label: '电梯电气安装维修'
        }, {
          value: '2',
          label: '电梯机械安装维修'
        }, {
          value: '3',
          label: '电梯修理'
        }
      ],
      disabled: false,
      title: '',
      dialogVisible: false,
      formInline: {
      },
      fileList: []
    }
  },
  mounted () {
  },
  methods: {
    handleClick () {
      this.fileList1 = [],
        this.formInline.certFilepath = ''
      this.certFileName = null
    },
    beforeUpload (file, fileList) {
      console.log(file)
      if (file.type != "" || file.type != null || file.type != undefined) {
        const isLt5M = file.size / 1024 / 1024 < 5 //这里做文件大小限制
        if (!isLt5M) {
          this.fileList1 = []
          this.$message('上传文件大小不能超过 5MB!')
          return false
        }
        this.fileList1 = []
        let formData = new FormData()
        formData.append('file', file.raw)
        formData.append('bucketName', 'other')
        this.loading = true
        getUploadFile(formData).then(res => {
          console.log(res)
          if (res.data.code == '200') {
            this.loading = false
            this.formInline.certFilepath = res.data.data.id,
              this.certFileName = file.name
            this.fileList1 = fileList
          }
        })
      }
    },
    // 上传最多一个
    handleExceedone () {
      this.$message.error("最多只能上传1个图片")
      return false
    },
    uploadFlie (file, fileList) {
      const isJPG =
        file.raw.type === "image/gif" ||
        file.raw.type === "image/jpg" ||
        file.raw.type === "image/png" ||
        file.raw.type === "image/jpeg" ||
        file.raw.type === "image/bmp"
      const isLt1M = file.size / 1024 / 1024 < 1
      if (!isJPG) {
        fileList.splice(fileList.length - 1, 1)
        return this.$message.error("上传图片只能是jpg,jpeg,png,gif,bmp格式!")
      } else if (!isLt1M) {
        fileList.splice(fileList.length - 1, 1)
        return this.$message.error("上传图片大小不能超过 1MB!")
      } else {
        let formData = new FormData()
        formData.append("file", file.raw)
        formData.append("bucketName", "other")
        getUploadFile(formData)
          .then((res) => {
            if (res.data.code == 200) {
              this.formInline.photo = res.data.data.id.toString()
              this.fileList = fileList
              this.$message({
                type: "success",
                message: "照片上传成功",
              })
            } else {
              fileList.splice(fileList.length - 1, 1)
              this.$message.error({
                message: res.data.msg,
              })
            }
          })
          .catch(() => {
            fileList.splice(fileList.length - 1, 1)
          })
      }
    },
    removeFile (file) {
      this.fileList = []
    },
    getEdit (formInline) {
      this.$refs[formInline].validate((valid) => {
        if (valid) {
          editmaintUserList(this.formInline).then(res => {
            if (res.data.code == '200') {
              this.handleClose()
              this.$parent.getPeopelList()
            } else {
              this.$message({
                type: 'warning',
                message: res.data.msg
              })
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })

    },
    getAdd (formInline) {
      this.$refs[formInline].validate((valid) => {
        if (valid) {
          addmaintUserInfo(this.formInline).then(res => {
            if (res.data.code == '200') {
              this.handleClose()
              this.$parent.getPeopelList()
            } else {
              this.$message({
                type: 'warning',
                message: res.data.msg
              })
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    handleClose () {
      this.$refs.formInline.resetFields()
      this.formInline = {},
        this.fileList = []
      this.disabled = false
      this.dialogVisible = false
      this.handleClick()
    },
  }
}

</script>
<style lang="less" scoped>
::v-deep .avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.box-card {
  margin: 0 15px 15px 15px;
  .clearfix {
    font-weight: bold;
  }
  .box_left {
    width: 60%;
  }
  .right {
    width: 40%;
  }
  .btn {
    display: flex;
    justify-content: center;
  }
}
::v-deep .delUploadColor {
  .el-upload--picture-card {
    display: none;
  }
  i.el-icon-plus {
    display: none;
  }
}
</style>